<script setup>
import {ref, defineExpose} from 'vue';

const name = ref('')
const sayHello = () => {
  console.log("Hello World！111111");
}

const setName = (nameRead) => {
  name.value = nameRead;
}
const getName = () => {
  return name.value;
}

defineExpose({
  sayHello,
  setName,
  getName,
})
const props = defineProps({
  message: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['changeName'])
</script>

<template>
  <div class="hello-world">
    xxxxxx
    <h4>{{ props.message }}</h4>
    <el-button @click="emit('changeName')">修改名字</el-button>
  </div>
</template>

<style scoped>
.hello-world {
  background-color: rgba(162, 232, 255, 0.96);
  border-radius: 10px;
  margin: 20px;
  height: 220px;
  width: 200px;
}
</style>
